<script setup lang="ts">
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import {
  createCheckinSubtasks,
  modifyCheckinSubtasks
} from "/@/api/warehousing";

type Props = {
  modelValue: boolean;
  formData: any;
  checkoutList: any;
  title: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  formData: () => ({}),
  checkoutList: () => [],
  title: ""
});
const emit = defineEmits(["update:modelValue", "submit-success"]);
const inputHandle = val => {
  emit("update:modelValue", val);
};

const inputWidth = "190px";
// const checkoutList = ref([]);

// onMounted(() => {
//   getCheckoutData();
// });

const submitHandle = () => {
  const obj = { ...props.formData };
  const fn =
    props.title === "添加去向" ? createCheckinSubtasks : modifyCheckinSubtasks;
  fn(obj).then(() => {
    ElMessage({
      type: "success",
      message: "操作成功"
    });
    emit("submit-success");
  });
};

// const getCheckoutData = () => {
//   getCheckoutList().then(({ data }) => {
//     checkoutList.value = data;
//   });
// };
</script>

<template>
  <div>
    <el-dialog
      :modelValue="modelValue"
      @update:modelValue="inputHandle"
      :title="title"
      width="55%"
    >
      <span>
        <el-form
          :inline="true"
          :model="formData"
          label-width="auto"
          label-position="left"
        >
          <el-form-item label="出库方式:">
            <!-- <el-input
              v-model="formData.checkout_name"
              :style="{ width: inputWidth }"
            /> -->
            <el-select
              v-model="formData.checkout_name"
              :style="{ width: inputWidth }"
            >
              <el-option
                v-for="item in checkoutList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="去向:">
            <el-input
              v-model="formData.place_to_go"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="箱麦:">
            <el-input
              v-model="formData.box_no"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="数量:">
            <el-input
              v-model="formData.quantity"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="总体积:">
            <el-input
              v-model="formData.total_volume"
              placeholder="保留两位小数"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="重量:">
            <el-input
              v-model="formData.weight"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="箱长:">
            <el-input
              v-model="formData.length"
              placeholder="保留两位小数"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="箱宽:">
            <el-input
              v-model="formData.width"
              placeholder="保留两位小数"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="箱高:">
            <el-input
              v-model="formData.height"
              placeholder="保留两位小数"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="收货地址:">
            <el-input
              v-model="formData.ship_to_address"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="DBA ID:">
            <el-input
              v-model="formData.fba_id"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="Ref ID:">
            <el-input
              v-model="formData.ref_id"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <!-- <el-form-item label="费用:">
            <el-input
              v-model="formData.fee"
              placeholder="保留两位小数"
              :style="{ width: inputWidth }"
            />
          </el-form-item>
          <el-form-item label="是否暂扣:">
            <el-select
              v-model="formData.is_temporary_storage"
              :style="{ width: inputWidth }"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input v-model="formData.notes" :style="{ width: inputWidth }" />
          </el-form-item> -->
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inputHandle(false)">取 消</el-button>
          <el-button type="primary" @click="submitHandle">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
